<script setup lang="ts">
import { ref,watch } from 'vue'
import { useRoute,useRouter } from 'vue-router'
import $api from '@/api'
import OrderItem from './components/OrderItem.vue'
const $route=useRoute(),$router=useRouter()
const tabs=ref([
  {name:'全部',value:null},
  {name:'待付款',value:1},
  {name:'已完成',value:2},
  {name:'已取消',value:-1},
]),tab=ref<any>(tabs.value[0]),orders=ref([])
function init() {
  const status=$route.query.status
  if(status){
    tab.value=tabs.value.find(item =>item.value==parseInt(status as string))
    getOrders(parseInt(status as string))
  }else{
    getOrders()
  }
  
}
function getOrders(status=undefined){
  const {data}=$api.order.list(status)
  watch(data,(_data:Array<any>) =>{
    orders.value=_data
    _data.map(item =>{
      item._total=item.counts.reduce((acc,curr,idx) =>acc+curr,0)
      item._amount=item.skus.reduce((acc,curr,idx) =>acc+curr.price,0)
    })
  })
}
function clickTab(item){
  tab.value=item
  orders.value=[]
  getOrders(item.value)
}
init()
</script>

<template>
  <div
    w:bg="blue-gray-100"
  >
    <div
      w:flex="~ nowrap"
      w:align="items-center"
      w:justify="around"
      w:bg="white"
      w:m="b-4"
    >
      <div v-for="(item,idx) in tabs" :key="idx" :class="[tab.value==item.value?'text-red-500 text-3xl':'']" @click="clickTab(item)"
        w:h="24"
        w:flex="~ col nowrap"
        w:align="items-center"
        w:justify="center"
      >
        <div>{{item.name}}</div>
        <div v-show="tab.value==item.value"
          w:bg="red-500"
          w:h="1"
          w:w="5/6"
          w:m="t-2"
        ></div>
      </div>
    </div>
    <div v-empty="orders.length">
      <OrderItem :order="item" v-for="(item,idx) in orders" :key="item._id" />
    </div>
  </div>
</template>

<style scoped lang="scss">

</style>

<route>
{
  meta: {
    title: '订单列表',
    auth: true
  }
}
</route>